<!--成片管理——文件夹形式，改造-->
<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding: 0;">
      <div style="padding: 16px 16px 12px 16px">
        <file-toolbar
          :directorys="directorys"
          :grid.sync="grid"
          :checked="checked"
          :parentId="parentId"
          :typeId="typeId"
          @done="onDone"
        />
        <file-header
          :total="total"
          :directorys="directorys"
          @update:directorys="updateDirectorys"
        />
      </div>
      <div v-loading="loading">
        <!--    文件夹list-->
        <!-- typeId  1:视频 2:音频 3:台本 4:图片 -->
        <file-list
          :total="total"
          :directorys="directorys"
          :typeId="typeId"
          :grid="grid"
          :data="data"
          :sort="sort"
          :order="order"
          :parentId="parentId"
          :search="search"
          :checked.sync="checked"
          @sort-change="onSortChange"
          @go-directory="onGoDirectory"
          @done="onDone"
        />
      </div>

      <!--分页按钮-->
      <el-pagination
        :hide-on-single-page="true"
        v-if="directorys.length >0"
        background
        layout="prev, pager, next,jumper, ->, total"
        :total="pageTotal"
        @current-change="handleCurrentChange"
        :current-page="fileForm.page"
        :page-size="fileForm.limit"
        style="text-align: center;padding-bottom: 30px">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
  import FileToolbar from './components/file-toolbar.vue';
  import FileHeader from './components/file-header.vue';
  import FileList from './components/file-list.vue';
  import { listUserFiles,publicFile,getFileAll,getTxtAll } from '@/api/creatCenter/material';
  import {projectQuery} from "@/api/creatCenter/authoringClips";
  import {projectjob} from "@/api/creatCenter/piecemeal";

  import {selectPage,queryVideos} from "@/api/creatCenter/piecemealManagement";

  export default {
    name: 'index',
    components: { FileToolbar, FileHeader, FileList },
    data() {
      return {
        // 表单数据
        form: {
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
        },
        fileForm:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
        },
        pageTotal:0,
        typeId:0,
        // 加载状态
        loading: true,
        // 文件列表数据
        data: [],
        // 排序字段
        sort: '',
        // 排序方式
        order: '',
        // 选中数据
        checked: [],
        // 文件夹数据
        directorys: [],
        // 总文件数
        total: 0,
        // 是否网格展示
        grid: true,
        // 父级 id
        parentId: 0,
        projectId:0,//查看成片projectId
        search:'',
        //获取用户名
        username:this.$store.state.user.info.username
      };
    },
    created() {
      console.log("this.$store.state.user",this.$store.state.user)
      console.log("search==================",this.search)
    },
    activated(){
      console.log("路由刷新======this.$route.query.id",this.$route.query.id)
      if(this.$route.query.projectId){
        this.parentId=0
        this.directorys=[]
        console.log(11111111111)
        this.projectId=this.$route.query.projectId
        // this.parentId=1109
        this.init()
      }
      else{
        this.directorys=[]
        this.parentId=0
        this.query();
      }
    },
    methods: {
      //点击按钮切换页面
      handleCurrentChange(currentPage) {
        console.log('this.currentPage111111)', currentPage);

        this.fileForm.page = currentPage; //每次点击分页按钮，当前页发生变化
        this.query()
      },
      // 从“创作剪辑”点击“查看成片”进入
      async init() {

        let userData=[]
        // userData = await projectQuery(this.form)
        userData = await selectPage({
          username:this.$store.state.user.info.username
        })
        console.log("userData",userData,' this.parentId', this.parentId)
        let item = userData.find(e => {
          console.log('e.projectId',e.projectId,'this.projectId',this.projectId)
          return  e.projectId == this.projectId
        })
        console.log('从“创作剪辑”点击“查看成片”进入测试item',item)
        if(item){
          this.onGoDirectory(item)
        }
        else{
          this.directorys=[]
          this.parentId=0
          this.query();
        }
      },
      /* 查询文件列表 */
      async query() {
        console.log(2222222)
        console.log("this.directorys.length",this.directorys.length)
        this.data = [];
        this.checked = [];
        this.loading = true;

        let userData=[]
        let videoFile={
          list:[]
        }
        console.log('this.parentId11111 ',this.parentId )
        //this.parentId == 0，代表在第一级，查询用户文件夹，否则第二级，查询文件夹下的视频
        if (this.parentId == 0) {
          // userData = await projectQuery(this.form)
          userData = await selectPage({
            username:this.$store.state.user.info.username
          })
          // userData = await selectPage(this.$store.state.user.info.username)
        }
        else{
          //根据条件获取所有视频文件
          Object.assign(this.fileForm,  {
            productPolderId:this.parentId  // 查看剪辑id下的成片
          })
          videoFile = await queryVideos(this.fileForm)


        }
        this.pageTotal=videoFile.count
        console.log('userData',userData,'videoFile',videoFile)
        //es6支持...数组合并
        let data  = [...userData,...videoFile.list];

        console.log(data)

        this.data = data.map((d) => {
          // typeId  1:视频 2:音频 3:台本 4:图片
          if(this.directorys.length==1){
            // name 为名称
            console.log("视频d.url====", d.outUrl.split('.mp4')[0],'222',d.outUrl)
            // let videoUrl = d.outUrl.split('.mp4')[0] + '.mp4' // 视频封面图
            let videoUrl = d.outUrl // 视频封面图
            // let name = (d.outUrl.split('.mp4')[0]).split('/').pop(); // 视频名称_(split:找出最后一次’/'后面出来的值)_——视频名不重要，改成时间

            /*  `waiting_for_users` bigint(20) DEFAULT '1' COMMENT '''1.未绑定待发布  2.已绑定待发布'','
            1，创作中心——成片管理，视频标识增加：矩阵发布占用中 标识——等于2有*/
            let hint = d.waitingForUsers==2 ? ' (矩阵发布占用中)' : '' /*后续要改成图标展示*/
            let name=d.createTime+hint
            console.log("name",name)
            this.$set(d,'name',name)
            this.$set(d,'url',d.outUrl)
            /* 视频生成成功，则展示‘视频缩略图’视频缩略图，否则展示‘待执行’图片 */
            if(d.state=="Success"){
              this.$set(d,'thumbnail',videoUrl + "?x-oss-process=video/snapshot,t_1000,f_jpg,m_fast")
            }
            else {
              this.$set(d,'thumbnail','https://z4a.net/images/2023/11/24/dashegces.png')

            }
          }
          // 将文件名称，从名称+时间戳+后缀，转为名称+后缀,名称修改
          if(d.title){
            let filename=d.name
            this.$set(d,'name',d.title)
          }

          return Object.assign({ name: d.name }, d, {
            // isDirectory: true, //代表是文件夹
            isDirectory: this.directorys.length === 0 ? true : false,
            length: this.formatLength(d.length)
          })
        })
        this.loading = false;
        this.total = data.length;
      },
      /* 刷新列表数据 */
      onDone() {
        this.query();
      },
      /* 文件列表排序方式改变 */
      onSortChange(option) {
        this.order = option.order;
        this.sort = option.sort;
        this.query();
      },
      /* 进入文件夹 */
      onGoDirectory(item) {
        this.typeId=item.type;
        console.log("进入文件夹",item)
        this.updateDirectorys([...this.directorys, item]);
      },
      /* 更新文件夹数据 */
      updateDirectorys(values) {
        this.directorys = values;
        // 修改 type类型id，当this.directorys.length<=0是文件夹，以免进入其他文件被更改typeId
        if(this.directorys.length<=0){
          this.typeId=0;
        }
        console.log("values=======",values)
        this.parentId = this.directorys[this.directorys.length - 1]?.id ?? 0;
        console.log('更新文件夹数据========',this.typeId)

        this.query();
      },
      /* 格式化文件大小 */
      formatLength(length) {
        if (length == null) {
          return '-';
        }
        if (length < 1024) {
          return length + 'B';
        } else if (length < 1024 * 1024) {
          return (length / 1024).toFixed(1) + 'KB';
        } else if (length < 1024 * 1024 * 1024) {
          return (length / 1024 / 1024).toFixed(1) + 'M';
        } else {
          return (length / 1024 / 1024 / 1024).toFixed(1) + 'G';
        }
      }
    }
  };
</script>

